<template>
  <!--模态窗 单行-->
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >
    <div class="modal-ctrl-body" v-show="modalObj.isShow">
      <div class="modal-ctrl-main even-row-ctrl">
        <div class="modal-title">
          <p v-text="modalTitle"></p>
        </div>
        <div class="modal-ctrl-content">
          <div class="even-row">
            <div class="modal-row">
              <div class="modal-form-key f-l indispensable">
                数据源名称：
              </div>
              <input type="text" maxlength="16" placeholder="最长16个字符"
                     :disabled="modalObj.type == 'detail'"
                     v-model="AddDataModal.datasourceName"
                     class="modal-text f-l">
            </div>

            <div class="modal-row">
              <div class="modal-form-key f-l indispensable">
                数据源类型：
              </div>
              <select  v-model="AddDataModal.datasourceType"
                       :class="{'disabled-bg-color': modalObj.type == 'detail'}"
                       :disabled="modalObj.type == 'detail'"
                       @change="selectType">
                <option v-for=" optionItem in filterData"
                        :key="optionItem.value"
                        :value="optionItem.value">
                  {{optionItem.key}}
                </option>
              </select>
            </div>

            <div class="modal-row">
              <div class="modal-form-key f-l" :class="{indispensable:AddDataModal.datasourceType != mongoType}">
                账号：
              </div>
              <input type="text" maxlength="16"
                     placeholder="最长16个字符"
                     :disabled="modalObj.type == 'detail'"
                     v-model="AddDataModal.username"
                     class="modal-text f-l">
            </div>

            <div class="modal-row">
              <div class="modal-form-key f-l" :class="{indispensable:AddDataModal.datasourceType != mongoType}">
                密码：
              </div>
              <input type="text" maxlength="16"
                     placeholder="最长16个字符"
                     :disabled="modalObj.type == 'detail'"
                     v-model="AddDataModal.pwd"
                     class="modal-text f-l">
            </div>
            <div style="height: 80px;" class="modal-row even-row-item clearfloat">
              <div class="modal-form-key f-l indispensable">
                URL：
              </div>
              <textarea type="text"
                     :placeholder="urlComputed"
                     :title="urlComputed"
                    :disabled="modalObj.type == 'detail'"
                     v-model="AddDataModal.url"
                        class="modal-text textarea f-l">
              </textarea>
            </div>
            <div class="modal-row even-row-item" v-show="AddDataModal.datasourceType != mongoType">
              <div class="modal-form-key f-l indispensable">
                驱动名称：
              </div>
              <input type="text"
                     :disabled="modalObj.type == 'detail'"
                     v-model="AddDataModal.driverClassName"
                     class="modal-text f-l">
            </div>
          </div>
        </div>
        <div class="btns text-r">
          <button type="button"
                  class="btn btn-info"
                  v-show="modalObj.type != 'detail'"
                  @click="AddFn('test')">test</button>
          <button type="button"
                  class="btn btn-info"
                  v-show="modalObj.type != 'detail'"
                  @click="AddFn('add')">保存</button>
          <button type="button" class="btn btn-default" @click="closeRoleModal">取消</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    name: "UpdateModel",
    props:["modalObj"],
    data(){
      return{
        AddDataModal:{
          datasourceName: '', // 数据源名称
          datasourceType: '', // 数据类型
          driverClassName: '', // 驱动名称
          pwd: '', // 密码
          url: '', // 地址
          username: '', // 账号
          id: ''
        },
        filterData: [],
        mongoType: 3

      }
    },
    mounted(){
     this.init()
    },
    computed: {
      urlComputed (){
        if (this.AddDataModal.datasourceType == '') {
          return '填写URL前先选择数据源类型'
        } else {
          return this.filterDataFn(this.AddDataModal.datasourceType)
        }
      },
      modalTitle () {
        if (this.modalObj.type === 'update') {
          return '修改数据源'
        } else if (this.modalObj.type === 'detail') {
          return '数据源详情'
        }
      }
    },
    methods:{
      // 弹窗显示加载初始化表单数据
      getInitData () {
        this.$axios.get(this.Beacon + '/datasource/showUpdate/' + this.modalObj.id).then(res => {
          this.AddDataModal.datasourceName = res.data.content.datasourceName
          this.AddDataModal.datasourceType = res.data.content.datasourceType
          this.AddDataModal.driverClassName = res.data.content.driverClassName
          this.AddDataModal.pwd = res.data.content.pwd
          this.AddDataModal.url = res.data.content.url
          this.AddDataModal.username = res.data.content.username
          this.AddDataModal.id = res.data.content.id
        })
      },
      init() {
       this.getDataSourceType()
      },
      // 获取数据源类型
      getDataSourceType () {
        this.$axios({
          url: this.Dictionary + "/tag/detail/type/datasourceType/key/datasourceType",
          method: 'get'
        }).then(res => {
          let data = []
          res.data.objs.map(item => {
            data.push({
              key: item.name,
              value: item.code,
              description: item.description
            })
          })
          this.filterData = data
        }).catch(err => {
          console.log(err, '数据源类型')
        })
      },
      // 通过数据源类型
      filterDataFn (type) {
       if(this.filterData.length > 0) {
         let data = this.filterData.filter(item => {
           if (item.value == type) {
             return true
           }
         })
         return data[0].description
       }
      },
      //清除缓存
      clearData(){
        this.AddDataModal={
          datasourceName: '', // 数据源名称
          datasourceType: '', // 数据类型
          driverClassName: '', // 驱动名称
          pwd: '', // 密码
          url: '', // 地址
          username: '' // 账号
        };
      },
      //关闭弹窗
      closeRoleModal(){
        this.clearData();
        this.$emit("closeModal");
      },
      // 弹窗确认按钮
      AddFn (str) {
        if (this.verifyForm.isNull(this.AddDataModal.datasourceName)) {
          this.s_alert('数据源名称不能为空')
          return
        }
        if (this.verifyForm.isNull(this.AddDataModal.datasourceType)) {
          this.s_alert('数据类型不能为空')
          return
        }
        if (this.verifyForm.isNull(this.AddDataModal.url)) {
          this.s_alert('URL不能为空')
          return
        }
        if (this.AddDataModal.datasourceType != this.mongoType) {
          if (this.verifyForm.isNull(this.AddDataModal.username)) {
            this.s_alert('账号不能为空')
            return
          }
          if (this.verifyForm.isNull(this.AddDataModal.pwd)) {
            this.s_alert('密码不能为空')
            return
          }
          if (this.verifyForm.isNull(this.AddDataModal.driverClassName)) {
            this.s_alert('驱动名称不能为空')
            return
          }
        }
        // 首先验证
        if(str == 'add') {
          this.s_loading(true)
          this.validateFn(str).then(() => {
            return this.$axios.post(this.Beacon + '/datasource/saveOrUpdate', this.AddDataModal)
          }).then(res => {
            this.s_loading(false)
            this.s_alert('修改成功')
            //关闭弹窗
            this.closeRoleModal ()
          }).catch(err => {
            this.s_loading(false)
            this.s_alert('修改失败')
            console.log(err, '修改')
          })
        } else {
          this.s_loading(true)
          this.validateFn(str)
        }
      },
      // 验证测试
      validateFn (str) {
       return this.$axios.post(this.Beacon + '/datasource/datasourceValidate', this.AddDataModal).then(res => {
         if(str != 'add'){
           this.s_loading(false)
           this.s_alert(res.data.content)
         }
         if (!res.data.success) { // 测试失败
           this.s_loading(false)
           this.s_alert(res.data.content)
           return true
         }
       }).catch(err => {
         this.s_loading(false)
         this.s_alert(res.data.content)
         return true
       })
      },
      // 数据源类型选择 清除相关数据
      selectType () {
        this.AddDataModal.driverClassName = ''
        this.AddDataModal.pwd = ''
        this.AddDataModal.url = ''
        this.AddDataModal.username = ''
      }
    },
    watch: {
      modalObj: {
        handler(v1){
          if( v1.isShow ){
            //this.radioId = this.selectRadioId;
            //获取详情
            this.getInitData()
          }
        },
        deep:true
      }
    }
  }
</script>

<style scoped>

</style>
